﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="~/Content/css/framework-font.css" rel="stylesheet" />
    <link href="~/Content/css/framework-ui.css" rel="stylesheet" />
    <script src="~/Content/js/jquery/jquery-2.1.1.min.js"></script>
    <link href="~/Content/css/framework-theme.css" rel="stylesheet" />
    <link href="~/Content/js/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/css/framework-theme.css" rel="stylesheet" />
    <script src="~/Content/js/charts/Chart.js"></script>
    <script src="~/Content/js/highcharts/highcharts.js"></script>
    <script src="~/Content/js/framework.js"></script>
    <script>
        $(function () {
            GetTodayStatistics();
            GetUserStatistics();
            GetLineChart();

            setTimeout(function () {
                GetTodayStatistics();
            }, 60000);

            setTimeout(function () {
                GetUserStatistics();
            }, 60 * 10 * 000);

            setTimeout(function () {
                GetLineChart();
            }, 60 * 10 * 000);
        });

        function GetTodayStatistics() {
            $.ajax({
                url: "/Home/GetTodayUserStatisticsJson",
                dataType: "JSON",
                type: "POST",
                success: function (rst) {
                    if (rst.state == "success") {
                        var data = rst.data;
                        $("#todayStatistics .m-top-none").eq(0).html(data.F_ArticleCount);
                        $("#todayStatistics .m-top-none").eq(1).html(data.F_MessageResponseCount + "/" + data.F_MessageCount);
                        $("#todayStatistics .m-top-none").eq(2).html(data.F_JobDealCount + "/" + data.F_JobCandidateCount);
                        $("#todayStatistics .m-top-none").eq(3).html(data.F_LostPropertyCount);
                        $("#todayStatistics .m-top-none").eq(4).html(data.F_QnAnswerCount);
                    }
                }
            });
        }

        function GetUserStatistics() {
            $.ajax({
                url: "/Home/GetUserStatisticsJson",
                dataType: "JSON",
                type: "POST",
                success: function (rst) {
                    if (rst.state == "success") {
                        var data = rst.data;
                        var labels = [];
                        var datas = [[], [], []];
                        for (var i = 0; i < data.length; i++) {
                            var item = data[i];
                            labels.push(string2Date(item.F_Date).format("MM-dd"));
                            datas[0].push(item.F_ClickCount);
                            datas[1].push(item.F_CommentCount);
                            datas[2].push(item.F_SubscribeCount);
                        }

                        var lineChartData = {
                            labels: labels,
                            datasets: [
                                {
                                    label: "点击",
                                    fillColor: "rgba(220,220,220,0.2)",
                                    strokeColor: "rgba(220,220,220,1)",
                                    pointColor: "rgba(220,220,220,1)",
                                    pointStrokeColor: "#fff",
                                    pointHighlightFill: "#fff",
                                    pointHighlightStroke: "rgba(220,220,220,1)",
                                    data: datas[0]
                                },
                                {
                                    label: "评论",
                                    fillColor: "rgba(151,187,205,0.2)",
                                    strokeColor: "rgba(151,187,205,1)",
                                    pointColor: "rgba(151,187,205,1)",
                                    pointStrokeColor: "#fff",
                                    pointHighlightFill: "#fff",
                                    pointHighlightStroke: "rgba(151,187,205,1)",
                                    data: datas[1]
                                },
                                {
                                    label: "新关注",
                                    fillColor: "rgba(243,206,133,0.2)",
                                    strokeColor: "rgba(243,206,133,1)",
                                    pointColor: "rgba(243,206,133,1)",
                                    pointStrokeColor: "#fff",
                                    pointHighlightFill: "#fff",
                                    pointHighlightStroke: "rgba(243,206,133,1)",
                                    data: datas[2]
                                }
                            ]
                        }
                        var ctx = document.getElementById("userStatisticsChart").getContext("2d");
                        window.myLine = new Chart(ctx).Line(lineChartData, {
                            responsive: false,
                            bezierCurve: false
                        });
                    }
                }
            });

        }

        function GetLineChart() {
            $.ajax({
                url: "/Home/GetLineStatisticsJson",
                dataType: "JSON",
                type: "POST",
                success: function (rst) {
                    if (rst.state == "success") {
                        var data = rst.data;
                        var labels = [];
                        var datas = [];
                        for (var i = 0; i < data.length; i++) {
                            var item = data[i];
                            labels.push(item.LineName + item.Direction);
                            datas.push(item.QueryCount);
                        }
                        $('#lineChart').highcharts({
                            chart: {
                                type: 'column',
                                zoomType: 'x'
                            },
                            title: {
                                text: '今日线路查询'
                            },
                            //subtitle: {
                            //    text: document.ontouchstart === undefined ?
                            //        '框选放大' :
                            //        '手势放大'
                            //},
                            xAxis: {
                                categories: labels
                            },
                            yAxis: {
                                min: 0,
                                title: {
                                    text: '次数'
                                }
                            },
                            tooltip: {
                                headerFormat: '<span>{point.key}</span><table>',
                                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                    '<td style="padding:0"><b>{point.y:.0f} 次</b></td></tr>',
                                footerFormat: '</table>',
                                shared: true,
                                useHTML: true
                            },
                            plotOptions: {
                                column: {
                                    pointPadding: 0.2,
                                    borderWidth: 0
                                }
                            },
                            series: [{
                                name: '线路名称',
                                data: datas
                            }]
                        });
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="areascontent">
        <div class="rows" style="margin-bottom: 1%; border: 1px solid #e6e6e6; overflow: hidden; padding-left: 1px;">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-line-chart fa-lg" style="padding-right: 5px;"></i>关键数据实时指标
                    <div style="float: right; position: relative; top: -4px; right: 0px;">
                        <iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=1" width="330" height="35" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
                    </div>
                </div>
                <div id="todayStatistics" class="panel-body">
                    <div class="dashboard-stats">
                        <div class="dashboard-stats-item" style="background-color: #fc8675;">
                            <h2 class="m-top-none"></h2>
                            <h5>发布文章</h5>
                            <div class="stat-icon">
                                <i class="fa fa-newspaper-o fa-3x"></i>
                            </div>
                        </div>
                    </div>
                    <div class="dashboard-stats">
                        <div class="dashboard-stats-item" style="background-color: #6bafbd;">
                            <h2 class="m-top-none"></h2>
                            <h5>意见反馈</h5>
                            <div class="stat-icon">
                                <i class="fa fa-hdd-o fa-3x"></i>
                            </div>
                        </div>
                    </div>
                    <div class="dashboard-stats">
                        <div class="dashboard-stats-item" style="background-color: #f3ce85;">
                            <h2 class="m-top-none"></h2>
                            <h5>应聘工作</h5>
                            <div class="stat-icon">
                                <i class="fa fa-users fa-3x"></i>
                            </div>
                        </div>
                    </div>
                    <div class="dashboard-stats">
                        <div class="dashboard-stats-item" style="background-color: #949FB1;">
                            <h2 class="m-top-none"></h2>
                            <h5>失物招领</h5>
                            <div class="stat-icon">
                                <i class="fa fa-credit-card fa-3x"></i>
                            </div>
                        </div>
                    </div>
                    <div class="dashboard-stats">
                        <div class="dashboard-stats-item" style="background-color: #65cea7; margin-right: 0px;">
                            <h2 class="m-top-none"></h2>
                            <h5>调查问卷</h5>
                            <div class="stat-icon">
                                <i class="fa fa-pencil-square-o fa-3x"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="rows" style="margin-bottom: 1%; overflow: hidden;">
            <div style="float: left; width: 49%; ">
                <div style="border: 1px solid #e6e6e6; background-color: #fff;">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <i class="fa fa-area-chart fa-lg" style="padding-right: 5px;"></i>用户行为统计
                            <div style="float: right">
                                <span style="font-weight: 500;"><i class="fa fa-square" style="color: #dcdcdc; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>点击</span>
                                <span style="margin-left: 10px; font-weight: 500;"><i class="fa fa-square" style="color: #97bbcd; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>评论</span>
                                <span style="margin-left: 10px; font-weight: 500;"><i class="fa fa-square" style="color: #f3ce85; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>新关注</span>
                            </div>
                        </div>
                        <div class="panel-body" style="padding-bottom: 0px;">
                            <canvas id="userStatisticsChart" style="height: 285px; width: 100%; padding-right: 10px;"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div style="float: right; width: 50%;">
                <div style="border: 1px solid #e6e6e6; background-color: #fff;">
                    <div class="panel panel-default">
                        <div class="panel-heading"><i class="fa fa-bar-chart fa-lg" style="padding-right: 5px;"></i>线路查询</div>
                        <div class="panel-body" style="padding-top: 20px;">
                            <div id="lineChart" style="height: 280px; margin: 0 auto"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        #copyrightcontent {
            height: 30px;
            line-height: 29px;
            overflow: hidden;
            position: absolute;
            top: 100%;
            margin-top: -30px;
            width: 100%;
            background-color: #fff;
            border: 1px solid #e6e6e6;
            padding-left: 10px;
            padding-right: 10px;
        }

        .dashboard-stats {
            float: left;
            width: 20%;
        }

        .dashboard-stats-item {
            position: relative;
            overflow: hidden;
            color: #fff;
            /*cursor: pointer;*/
            height: 105px;
            margin-right: 25px;
            margin-bottom: 10px;
            padding: 20px 20px;
        }

            .dashboard-stats-item .m-top-none {
                margin-top: 2px;
            }

            .dashboard-stats-item h2 {
                font-size: 35px;
                font-family: inherit;
                line-height: 1.1;
                font-weight: 500;
            }

            .dashboard-stats-item h5 {
                font-size: 14px;
                font-family: inherit;
                margin-top: 3px;
                line-height: 1.1;
            }


            .dashboard-stats-item .stat-icon {
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 30px;
                opacity: .3;
            }

        .dashboard-stats i.fa.stats-icon {
            width: 50px;
            padding: 20px;
            font-size: 50px;
            text-align: center;
            color: #fff;
            height: 50px;
            border-radius: 10px;
        }

        .panel-default {
            border: none;
            border-radius: 0px;
            margin-bottom: 0px;
            box-shadow: none;
            -webkit-box-shadow: none;
        }

            .panel-default > .panel-heading {
                color: #777;
                background-color: #fff;
                border-color: #e6e6e6;
                padding: 10px 10px;
            }

            .panel-default > .panel-body {
                padding: 10px;
                padding-bottom: 0px;
            }

                .panel-default > .panel-body ul {
                    overflow: hidden;
                    padding: 0;
                    margin: 0px;
                    margin-top: -5px;
                }

                    .panel-default > .panel-body ul li {
                        line-height: 27px;
                        list-style-type: none;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }

                        .panel-default > .panel-body ul li .time {
                            color: #a1a1a1;
                            float: right;
                            padding-right: 5px;
                        }
    </style>
</body>
</html>
